<template>
  <div class="factory-content" v-if="mounted">
    <Row class="search">
      <ul>
        <li>
          <span>省市区:</span>
          <AreaSelect v-model="selectedAddressL" :isChangeOnSelect="true" />
          <Input
            v-model="keywordL"
            placeholder="模糊搜索门店名称,门头编号,联系人姓名"
          />
          <Button type="primary" @click="onSearchLeft">搜索</Button>
        </li>
        <li class="bg-light">
          <Checkbox v-model="isSelectAll" @on-change="onSelectAll">全选</Checkbox>
          <h3>当前门店</h3>
        </li>
        <li>
          <span>品牌</span>
          <span>门店名称</span>
          <span>门头编号</span>
          <span>当前维护人</span>
          <span>联系人姓名</span>
        </li>
        <li
          v-for="(item, idx) in changeListNotSelect"
          :key="item.id"
          @click="onSelectItem(item, idx)"
        >
          <span>
            <Checkbox v-model="item.checked" />
            <span>{{item.brandName}}</span>
          </span>
          <span>{{item.storeName}}</span>
          <span>{{item.storeNo}}</span>
          <span>{{item.salesmanName}}</span>
          <span>{{item.ownerName}}</span>
        </li>
        <li v-if="!changeListNotSelect.length">暂无数据！</li>
      </ul>
      <ul>
        <li>
          <span>省市区:</span>
          <AreaSelect  v-model="selectedAddressR" :isChangeOnSelect="true" :isGetAddressTree='true' />
          <Input
            v-model="keywordR"
            placeholder="模糊搜索门店名称,门头编号,联系人姓名"
          />
        </li>
        <li class="bg-light">
          <h3>已选门店</h3>
        </li>
        <li>
          <span>品牌</span>
          <span>门店名称</span>
          <span>门头编号</span>
          <span>当前维护人</span>
          <span>联系人姓名</span>
        </li>
        <li v-for="item in hasListWithSelect"
          :style="item.unsign?'background: #d1d1d1':''"
          :key="item.id"
          @click="onCancelSelectItem(item)">
          <span>
            <Checkbox v-model="item.checked" v-show="!item.owner" />
            <span>{{item.brandName}}</span>
          </span>
          <span>{{item.storeName}}</span>
          <span>{{item.storeNo}}</span>
          <span>{{item.salesmanName}}</span>
          <span>{{item.ownerName}}</span>
        </li>
        <li v-if="!hasListWithSelect.length">暂无数据！</li>
      </ul>
    </Row>
    <Row class="search">
      <div class="pager">
          <Page
          :total="changeList.length"
          :current="pages.leftCur"
          :page-size="pages.leftSize"
          @on-change="onPageChange($event, 'left')"
          @on-page-size-change="onPageSizeChange($event, 'left')"
          show-sizer
          placement="top"></Page>
        </div>
      <div class="pager">
        <Page
          :total="hasList.length"
          :current="pages.rightCur"
          :page-size="pages.rightSize"
          @on-change="onPageChange($event, 'right')"
          @on-page-size-change="onPageSizeChange($event, 'right')"
          show-sizer
          placement="top"></Page>
      </div>
    </Row>
  </div>
</template>
<script>
import AreaSelect from '~/AreaSelect';
export default {
  components: {
    AreaSelect
  },
  props: {
    brandIds: {
      type: Array,
      default: () => []
    },
    distributorId: {
      type: String,
      default: ''
    },
    salesmanId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      value1: "",
      id: null,
      resignBrand: "",
      changeList: [
      ],
      hasList: [],  // 编辑时已签约经销商
      loading: false,
      isSelectAll: false,
      keywordL: '', // 左侧搜索关键词
      selectedAddressL: [], // 左侧省市区选择
      keywordR: '',
      selectedAddressR: [], // 右侧省市区选择
      rightClickItem: {},
      pages: {
        leftCur: 1,
        leftSize: 20,
        leftTotal: 0,
        rightCur: 1,
        rightSize: 20,
        rightTotal: 0,
      },
      mounted: false
    };
  },
  mounted() {
    this.mounted = true
  },
  computed: {
    changeListNotSelect() {
      let changeList = this.changeList
      changeList = this.filterArr(changeList, this.selectedAddressL, this.keywordL)
      changeList = changeList.slice((this.pages.leftCur-1)*this.pages.leftSize, this.pages.leftSize*this.pages.leftCur)
      return changeList.filter(e => !e.checked);
    },
    hasListWithSelect() {
      let hasList = this.hasList
      hasList = hasList.map(item => {
        if (!this.brandIds.find(i => i == item.brandId) || item.checked) { // 没有选择该品牌，要把已签约门店的添加将要解约的标识
          item.unsign = true
        } else {
          item.unsign = false
        }
        item.owner = true
        return item
      })
      hasList = this.filterPvArr(hasList, this.selectedAddressR, this.keywordR)
      hasList = hasList.slice((this.pages.rightCur-1)*this.pages.rightSize, this.pages.rightSize*this.pages.rightCur)
      return hasList.concat(this.changeList.filter(e => e.checked));
    }
  },
  methods: {
    /**
     * 需要过滤的数组 选择的省市区 搜索关键词
     */
    filterArr(arr,s, k) {
      // let p = s[0], c = s[1], a = s[2]
      // if (a) {
      //   arr = arr.filter(item => item.areaId === a)
      // } else if (!a && c) {
      //   arr = arr.filter(item => item.cityId === c)
      // } else if (!a && !c && p) {
      //   arr = arr.filter(item => item.provinceId === p)
      // }
      if(k) {
        arr = arr.filter(item => {
          return item.storeName.indexOf(k) > -1 || item.storeNo.indexOf(k) > -1 || item.salesmanName.indexOf(k) > -1
        })
      }
      return arr
    },
    filterPvArr(arr,s, k) {
      let p = s[0], c = s[1], a = s[2]
      if (a) {
        arr = arr.filter(item => item.areaId === a)
      } else if (!a && c) {
        arr = arr.filter(item => item.cityId === c)
      } else if (!a && !c && p) {
        arr = arr.filter(item => item.provinceId === p)
      }
      if(k) {
        arr = arr.filter(item => {
          return item.storeName.indexOf(k) > -1 || item.storeNo.indexOf(k) > -1 || item.salesmanName.indexOf(k) > -1
        })
      }
      return arr
    },
    getSignedDistributor(params) {
      this.$ajaxPost('/distributor_salesman/contractBySalesman', params).then(res => {
        this.hasList = res
      })
    },
    clearSignedDistributor() {
      this.hasList = []
    },
    onSelectItem(item) {
      let idx = this.changeList.findIndex(e => e.id === item.id);
      item.checked = true;
      this.$set(this.changeList, idx, item);
    },
    onSelectAll(val) {
      if (val) {
        this.changeList = this.changeList.map(item => {
          item.checked = true;
          return item;
        });
      }
    },
    onSelectAll2(val) {
      if (val) {
        this.changeList = this.changeList.map(item => {
          item.checked = true;
          return item;
        });
      }
    },
    onCancelSelectItem(item) {
      let idx = this.hasList.findIndex(e => e.id === item.id)
      if (idx > -1) {
        let h = this.hasList[idx]
        h.checked = !h.checked
        this.$set(this.hasList, idx, h)
      } else {
        this.isSelectAll = false;
        item.checked = false;
        this.changeList = this.changeList.map(e => {
          if (e.id === item.id) return item;
          return e;
        });
      }
    },
    onSearchLeft() {
      if(!this.distributorId) {
        this.$Message.info('请先选择经销商')
        return
      }
      this.getDistributorList()
    },
    getDistributorList() {
      if (!this.distributorId) return
      let [p, c, a] = this.selectedAddressL
      let params = {
        masterBrandIds: this.brandIds,
        distributorId: this.distributorId,
        salesmanId: this.salesmanId,
        cityId: c,
        provinceId: p,
        areaId: a
      }
      this.$ajaxPost('/contract_store/listStores', params).then(res => {
        this.changeList = res
      })
    },
    onPageChange(v, t) {
      this.pages[t==='left'?'leftCur':'rightCur'] = v
    },
    onPageSizeChange(v, t) {
      this.pages[t==='left'?'leftSize':'rightSize'] = v
    },
  },
  watch: {
    brandIds() {
      this.changeList = []
      this.getDistributorList()
    },
    distributorId() {
      this.changeList = []
    },
  },
};
</script>
